<template>
	<div class="game_account">
		<div class="c-flex c-a-c top">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/' }">商城</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>电竞商城</el-breadcrumb-item>
				<el-breadcrumb-item>游戏账号</el-breadcrumb-item>
			</el-breadcrumb>
			<div>
				<el-button type="primary" @click="goAdd">添加商品</el-button>
			</div>
		</div>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="商品名称:">
					<el-input v-model="searchForm.goodsName" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="供应商:">
					<el-select v-model="searchForm.menuThree" placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="item in optionsSupplier" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态:">
					<el-select v-model="searchForm.goodsState" placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option label="上架" value="ONLINE"></el-option>
						<el-option label="下架" value="OFFLINE"></el-option>
						<el-option label="售罄" value="ZERO"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">查询</el-button>
					<el-button @click="goReset">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="account_lists">
			<template>
				<el-table :data="accountData" border style="width: 100%">
					<el-table-column prop="goodsNo" label="商品编号">
					</el-table-column>
					<el-table-column prop="platform" label="游戏平台">
					</el-table-column>
					<el-table-column prop="game" label="游戏名称">
					</el-table-column>
					<el-table-column prop="goodsName" label="商品名称">
					</el-table-column>
					<el-table-column label="商品图片">
						<template slot-scope="scope">
							<img :src="(scope.row.goodsImg).split(',')[0]" width="100%" height="100%">
						</template>
					</el-table-column>
					<el-table-column prop="baseAmount" label="成本价">
					</el-table-column>
					<el-table-column prop="truthAmount" label="售价(元)">
					</el-table-column>
					<el-table-column prop="price" label="标价(元)">
					</el-table-column>
					<el-table-column prop="vipAmount" label="会员价(元)">
					</el-table-column>
					<el-table-column prop="baseSales" label="商品销量">
					</el-table-column>
					<el-table-column prop="salesAmount" label="销售总额(元)">
					</el-table-column>
					<!-- <el-table-column label="库存(件)">
						<template slot-scope="scope">
							<span class="list_stock" @click="openStocks(scope.row.goodsNo)">{{scope.row.stocks}}</span>
						</template>
					</el-table-column> -->
					<el-table-column prop="fromName" label="供应商">
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<span class="list_stock">{{scope.row.goodsState | formatState}}</span>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作">
						<template slot-scope="scope">
							<div v-if="scope.row.goodsState == 'ONLINE'">
								<el-button type="text" size="small" @click="goUpload(scope.row.id,scope.row.goodsNo)">下架</el-button>
							</div>
							<div v-else-if="scope.row.goodsState == 'OFFLINE'">
								<el-button type="text" size="small" @click="goDownload(scope.row.id,scope.row.goodsNo)">上架</el-button>
								<el-button type="text" size="small" @click="goDetail(scope.row.id)">修改</el-button>
							</div>
							<div v-else>
								<el-button type="text" size="small" @click="goDetail(scope.row.id,scope.row.goodsNo)">修改</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="block Pagination">
			<el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="prev, pager, next, jumper"
			 :page-size="10" :total="total">
			</el-pagination>
		</div>

		<el-dialog title="库存详情" :visible.sync="storeVisible" width="60%">
			<div class="c-flex storedia">
				<div class="c-flex c-a-c supplier">
					<div>供应商: </div>
					<el-select v-model="supplierValue" size="mini" placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="item in optionsSupplier" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="c-flex c-a-c">
					<div>状态: </div>
					<el-option label="全部" value=""></el-option>
					<el-select v-model="statusValue" size="mini" placeholder="请选择">
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="account_lists">
				<template>
					<el-table :data="storeData" border style="width: 100%">
						<el-table-column prop="menuGys" label="供应商">
						</el-table-column>
						<el-table-column prop="code" label="账号/兑换码">
						</el-table-column>
						<el-table-column prop="pwd" label="密码">
						</el-table-column>
						<el-table-column prop="email" label="邮箱">
						</el-table-column>
						<el-table-column prop="epwd" label="邮箱密码">
						</el-table-column>
						<el-table-column prop="amount" label="进货价">
						</el-table-column>
						<el-table-column fixed="right" label="状态">
							<template slot-scope="scope">
								<el-button type="text" size="small" v-if="scope.row.stockState=='ABLE'" style="color:#33CC00">有效</el-button>
								<el-button type="text" size="small" v-else-if="scope.row.stockState=='LOCK'" style="color:#CC9900">锁定</el-button>
								<el-button type="text" size="small" v-else style="color:#FF0000">售出</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				optionsPlat: [],
				optionsName: [],
				optionsSupplier: [],
				searchForm: {},
				accountData: [],
				currentPage: 1,
				total: 10,
				storeVisible: false,     //库存详情
				storeData: [],           //库存数据
				supplierValue: '',
				supplierOptions: [],
				statusValue: '',
				statusOptions: [
					{
						value: 'ABLE',
						label: '有效'
					},
					{
						value: 'LOCK',
						label: '锁定'
					},
					{
						value: 'SOLD',
						label: '售出'
					}],
			};
		},
		mounted() {

			var _this = this;
			var params = {};
			params.goodsType = 'NUMBER';
			params.pageSize = 10;
			this.getList(params);

			//1 游戏平台  2 游戏名称   3 供应商
			var options_a = {}, options_b = {}, options_c = {};
			options_a.id = 1;
			options_b.id = 2;
			options_c.id = 3;

			function getOptionsA() {
				return _this.axios.get('shop/classify/classifyMenuList', { params: options_a });
			}

			function getOptionsB() {
				return _this.axios.get('shop/classify/classifyMenuList', { params: options_b });
			}

			function getOptionsC() {
				return _this.axios.get('shop/classify/classifyMenuList', { params: options_c });
			}

			_this.axios.all([getOptionsA(), getOptionsB(), getOptionsC()])
				.then(_this.axios.spread(function (optionsa, optionsb, optionsc) {
					_this.optionsPlat = optionsa.data.data;
					_this.optionsName = optionsb.data.data;
					_this.optionsSupplier = optionsc.data.data;
				}));
		},

		methods: {
			getList(params) {
				this.axios
					.get("spGoods/list", { params: params })
					.then(res => {
						var _data = res.data;
						this.accountData = _data.data.list;
						this.total = _data.data.total;
						console.log(this.total)
					})
					.catch(error => console.log(error));
			},
			//查询
			onSubmit() {
				var params = this.searchForm;
				params.goodsType = 'NUMBER';
				this.getList(params);

			},
			//换页
			handleCurrentChange(val) {
				var params = this.searchForm;
				params.goodsType = 'NUMBER';
				params.pageNum = this.currentPage = val;
				params.pageSize = 10;
				this.getList(params);
			},
			goAdd() {
				this.$router.push({
					path: '/addAccount'
				});
			},
			//库存详情弹窗
			openStocks(number) {
				this.storeVisible = true;
				var params = {};
				params.goodsNo = number;
				this.axios
					.get("spGoods/spGoodsStockList", { params: params })
					.then(res => {
						var _data = res.data.data;
						this.storeData = _data.list;
						console.log(this.storeData)
					})
					.catch(error => console.log(error));
			},
			//上架状态要下架
			goDownload(id, number) {
				var params = {};
				params.id = id;
				params.goodsNo = number;
				params.goodsState = 'ONLINE';
				this.axios
					.post("spGoods/updateSpGoods", params)
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							var _params = {};
							_params.goodsType = 'NUMBER';
							this.getList(_params);
						}
					})
					.catch(error => console.log(error));
			},
			//下架状态要上架
			goUpload(id, number) {
				var params = {};
				params.id = id;
				params.goodsNo = number;
				params.goodsState = 'OFFLINE';
				this.axios
					.post("spGoods/updateSpGoods", params)
					.then(res => {
						var _data = res.data;
						if (_data.code == 200) {
							var _params = {};
							_params.goodsType = 'NUMBER';
							this.getList(_params);
						}
					})
					.catch(error => console.log(error));
			},
			//修改
			goDetail(id) {
				this.$router.push({
					path: '/addAccount?id=' + id
				});
			},
			goReset() {
				this.searchForm = {};
			},
		}
	};
</script>
<style lang="less">
	.game_account {
		width: 100%;
		padding: 15px;

		.top {
			height: 60px;
			border-bottom: 1px solid #dcdcdc;
			margin-bottom: 20px;
			justify-content: space-between;
		}

		.account_lists {
			margin-top: 15px;

			.list_stock {
				display: inline-block;
				width: 100%;
				height: 100%;
				cursor: pointer;
			}
		}

		.el-dialog__body {
			padding: 0 20px 30px;
			margin-top: -38px;

			.storedia {
				justify-content: flex-end;
				margin: 0 50px 35px 0;

				.supplier {
					margin-right: 15px;
				}
			}
		}
	}

	.el-dialog__header {
		border-bottom: 1px solid #dcdcdc;
	}

	.el-pagination {
		text-align: right;
	}
</style>